<template>
   <div class="header">
     <div class="header_l">
       <span class="iconfont">&#xe624;</span>
     </div>
     <div class="header_input">
       <span class="iconfont">&#xe62b;</span>
       请输入旅游景点</div>
       <router-link to="/city">
         <div class="header_r">{{this.city}}
          <span class="iconfont">&#xe6aa;</span>
         </div>
       </router-link>
   </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'HomeHeader',
  computed: {
    ...mapState(['city'])
  }
}
</script>

<style lang="stylus" scoped>
@import'~styles/varibles.styl'
  .header
    color white
    height: $headerHeight
    display flex
    flex-direction row
    justify-content space-between
    background:$bgColor
    .header_l
      line-height $headerHeight
      width .64rem
      text-align center
    .header_input
      color #ccc
      height .64rem
      line-height .64rem
      margin-top .12rem
      flex 1
      border-radius .1rem
      padding-left .2rem
      background #fff
    .header_r
      color white
      font-size .24rem
      line-height $headerHeight
      min-width 1.04rem
      padding .1rem
      text-align center
      span
        font-size .24rem
</style>
